﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form :model="entityObj" :rules="rules" :disabled="mode == 'Show'" ref="dialogForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货单号:">{{ entityObj.backGoodsOrderCode }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货单位:">{{ entityObj.purchaseUnityName }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货人:">{{ entityObj.backGoodsName }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货时间:">{{ entityObj.backGoodsDate }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="收货状态:">{{ entityObj.taskStatusDesc }}</el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-form-item label-width="130px" label="收货时间:">
                    <el-date-picker
                        style="width: 300px"
                        v-model="queryList.taskDate"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        unlink-panels="true"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :default-time="defaultTime"
                    />
                </el-form-item>
                <el-form-item label="收货人:" label-width="120px">
                    <el-input placeholder="---请输入收货人---" v-model="queryList.taskName" />
                </el-form-item>
                <el-form-item label="物料名称:" label-width="120px">
                    <el-input placeholder="---请输入物料名称---" v-model="queryList.materialName" />
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button
                        :icon="Search"
                         
                        type="primary"
                        @click="handleSearch"
                    >查询</el-button>
                    <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                </el-form-item>

                <el-col :span="8"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>

                <el-col :span="4"></el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <el-table
                            :data="entityObj.taskOrderItems"
                            border
                            style="width: 100%"
                            show-summary
                        >
                            <el-table-column label="物料编码" width="110" prop="materialCode"></el-table-column>
                            <el-table-column label="物料名称" width="220" prop="materialName"></el-table-column>
                            <el-table-column label="分类" width="160" prop="materialTypeName"></el-table-column>
                            <el-table-column label="规格" width="140" prop="materialSpecs"></el-table-column>
                            <el-table-column label="单位" width="70" prop="unitName"></el-table-column>
                            <el-table-column label="本次收货" width="90" prop="taskQty"></el-table-column>
                            <el-table-column label="收货编号" width="160" prop="taskOrderCode"></el-table-column>
                            <el-table-column label="收货人" width="95" prop="taskName"></el-table-column>
                            <el-table-column label="收货时间" width="110" prop="taskDate">
                                <template #default="scope">{{scope.row.taskDate?.slice(0,10)}}</template>
                            </el-table-column>
                            <el-table-column label="入库仓库" width="120" prop="warehouseName"></el-table-column>
                            <el-table-column label="入库编号" width="120" prop="inStockCode"></el-table-column>
                            <el-table-column label="供应商" width="120" prop="supplierName"></el-table-column>
                            <el-table-column label="收货照片" width="200">
                                <template #default="scope">
                                        <el-image
                                            v-for="(item,index) in scope.row.taskFiles"
                                            :key="index"
                                            style="width: 50px; height: 40px;margin: 4px;"
                                            :src="item"
                                            :zoom-rate="1.2"
                                            :max-scale="7"
                                            :min-scale="0.2"
                                            :preview-src-list="[item]"
                                            preview-teleported="true"
                                            :z-index="9999"
                                            fit="cover"
                                        />
                                        <!-- <img
                                            v-for="(item,index) in scope.row.taskFiles"
                                            :key="index"
                                            :src="item"
                                            style="width: 50px; height: 40px;margin: 4px;"
                                        /> -->
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template #default="scope">
                                    <el-button type="primary" size="small" @click="opPatch(scope.row)">修改</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="收货图片:">
                        <div style="display: flex; flex-wrap: wrap;">
                            <img 
                                v-for="(item,index) in entityObj.taskOrderItems?entityObj.taskOrderItems[0].taskFiles:[]"
                                :key="index"
                                :src="item"
                                style="width: 150px;height: 150px; margin: 4px;"
                            />
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="操作:">
                        <el-button type="primary" size="small" @click="opPatch()">修改</el-button>
                    </el-form-item>
                </el-col>
            </el-row> -->
        </el-form>

        <task-files-dialog
            v-if="dialogTaskFiles"
            ref="taskFilesDialog"
            @fatherMethod="opBindData"
            @success="handleSaveSuccess"
            @closed="dialogTaskFiles = false"
        ></task-files-dialog>
    </full-screen-dialog>
    
</template>



<script>
import tool from "@/utils/tool";
//import taskFilesDialog from "./taskFiles";
export default {
    emits: ["success", "closed"],
    components: {
        //taskFilesDialog
    },
    data() {
        return {
            mode: "Task",
            titleMap: {
                Send: "物料收货明细",
                Task: "物料收货明细",
            },
            entityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            dialogTaskFiles:false,
            //验证规则
            rules: {
                sendDate: [
                    { required: true, type: "string", message: "请填写" },
                ],
                supplierId: [
                    { required: true, type: "number", message: "请填写" },
                ],
                logisticsCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
            },
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsSuppliers: [],
            itemsData: [],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    computed: {
        // itemsData() {
        //     let filtered = this.entityObj.purchaseProtocolItems;
        //     if (this.queryList.materialTypeIds&&this.queryList.materialTypeIds.length>0) {
        //         filtered = filtered.filter(item => {
        //             return this.queryList.materialTypeIds.includes(item.materialTypeId);
        //         });
        //     }
        //     if (this.queryList.materialCode) {
        //         filtered = filtered.filter(item => {
        //             return item.materialCode.includes(this.queryList.materialCode);
        //         });
        //     }
        //     if (this.queryList.materialName) {
        //         filtered = filtered.filter(item => {
        //             return item.materialName.includes(this.queryList.materialName);
        //         });
        //     }
        //     return filtered;
        // },
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //补录
        opPatch(row){
            this.dialogTaskFiles=true;
            var data={
                taskOrderId:row.taskOrderId,
                taskFiles:row.taskFiles,
            }
            this.$nextTick(() => {
                    this.$refs.taskFilesDialog.open("Show").setData(data);
                });
        },
        //表单注入数据
        async setData(data) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    `back-goods-order/task-items`, 
                    {backGoodsOrderIds:[data.backGoodsOrderId]}
                );
                if (returnValue.status == 200) {
                    this.entityObj = {
                        ...data,
                        taskOrderItems: [...returnValue.response],
                    };

                    this.itemsData = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async opBindData()
        {
            console.log("刷新数据");
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    `task-order/received-task/${ this.entityObj.taskOrderType}/${ this.entityObj.orderId}`,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj.taskOrderItems=[...returnValue.response];
                    this.itemsData = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        handleSearch() {
            var items = this.itemsData;
            if (this.queryList.taskDate) {
                items = items.filter((item) => {
                    return (
                        item.taskDate >= this.queryList.taskDate[0] &&
                        item.taskDate <= this.queryList.taskDate[1]
                    );
                });
            }

            if (this.queryList.taskName) {
                items = items.filter((item) => {
                    return item.taskName.includes(this.queryList.taskName);
                });
            }
            if (this.queryList.materialName) {
                items = items.filter((item) => {
                    return item.materialName.includes(
                        this.queryList.materialName
                    );
                });
            }

            this.entityObj.taskOrderItems = items;
        },
        resetSearch() {
            this.queryList = {};
        },
    },
    async mounted() {},
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 10px !important;
}
</style>
